<template>
    <div class="head-line">考核列表</div>
    <el-table :data="content_datas" style="width: 100%">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="部门目标" prop="departmentweektarget" :show-overflow-tooltip="true" />
        <el-table-column label="考核名称" prop="departmentname" />
        <el-table-column label="考核部门" prop="departmentassessment" />
        <el-table-column label="考核范围" prop="scopeassessment" :show-overflow-tooltip="true" />
        <el-table-column label="考核内容" prop="contentassessment" :show-overflow-tooltip="true" />
        <el-table-column label="考核时间" prop="timeassessment" />

        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="请输入关键字..." @keyup.enter="se()" />
            </template>
            <template #default="scope">
                <el-button class="bian" size="small" @click="getDatas(scope.row)">编辑</el-button>
                <el-button class="del" size="small" type="danger" @click="delDatas(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="form">
            <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off" />
            </el-form-item>

            <el-form-item label="部门目标" :label-width="formLabelWidth">
                <el-input v-model="form.departmentweektarget" autocomplete="off" />
            </el-form-item>

            <el-form-item label="考核名称" :label-width="formLabelWidth">
                <el-input v-model="form.departmentname" autocomplete="off" />
            </el-form-item>

            <el-form-item label="考核部门" :label-width="formLabelWidth">
                <el-input v-model="form.departmentassessment" autocomplete="off" />
            </el-form-item>

            <el-form-item label="考核范围" :label-width="formLabelWidth">
                <el-input v-model="form.scopeassessment" autocomplete="off" />
            </el-form-item>

            <el-form-item label="考核内容" :label-width="formLabelWidth">
                <el-input v-model="form.contentassessment" autocomplete="off" />
            </el-form-item>

            <el-form-item label="考核时间" :label-width="formLabelWidth">
                <el-input v-model="form.timeassessment" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="putDatas">
                    修改数据
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 分页 -->
    <div class="demo-pagination-block">
        <el-pagination :currentPage="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :background="background" layout="total, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script>
    // onBeforeMount, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted
    import { ref, reactive, onBeforeMount, onMounted } from "vue";
    import axios from "axios";
    import { ElMessage } from 'element-plus';
    import { ElMessageBox } from 'element-plus'

    export default {
        name: 'UserListNav',
        setup() {
            let content_datas = ref([]);
            let search = ref("");


            const dialogTableVisible = ref(false)
            let dialogFormVisible = ref(false)
            const formLabelWidth = '140px'

            let dialogVisible = ref(false)

            let form = reactive({
                id: '',
                scopeassessment: "",
                timeassessment: "",
                departmentweektarget: "",
                departmentname: "",
                departmentassessment: "",
                contentassessment: ""
            })

            let pagination = reactive({
                currentPage: 1,
                pageSize: 5,
                total: 0

            });

            const background = ref(true)

            // dom挂在前
            onMounted(() => {

                let url = `http://localhost:8080/departments/${pagination.currentPage}/${pagination.pageSize}`
                axios.get(url)
                    .then(function (response) {
                        console.log("数据获取成功", response.data.data.records);
                        content_datas.value = response.data.data.records;

                        pagination.pageSize = response.data.data.size;
                        pagination.currentPage = response.data.data.current;
                        pagination.total = response.data.data.total;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            })

            // 分页查询切换页码
            function handleCurrentChange(currentPage) {
                pagination.currentPage = currentPage;
                let url = `http://localhost:8080/departments/${pagination.currentPage}/${pagination.pageSize}`
                axios.get(url)
                    .then(function (response) {
                        console.log("数据获取成功", response.data.data.records);
                        content_datas.value = response.data.data.records;

                        pagination.pageSize = response.data.data.size;
                        pagination.currentPage = response.data.data.current;
                        pagination.total = response.data.data.total;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }

            // 根据id删除数据
            function delDatas(row) {
                let url = "http://localhost:8080/departments/"
                console.log(row);
                axios.delete(url + row.id)
                    .then(function (response) {
                        // console.log(response);
                        if (response.data.flag) {
                            ElMessage({
                                message: "文章删除成功！",
                                type: 'success'
                            });
                        } else {
                            ElMessage.error('文章删除操作失败！');
                        }
                    }).finally(() => {
                        let url = `http://localhost:8080/departments/${pagination.currentPage}/${pagination.pageSize}`
                        axios.get(url)
                            .then(function (response) {
                                console.log("数据获取成功", response.data.data.records);
                                content_datas.value = response.data.data.records;

                                pagination.pageSize = response.data.data.size;
                                pagination.currentPage = response.data.data.current;
                                pagination.total = response.data.data.total;
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                    })
                    .catch(function (error) {
                    });
            }

            // 根据id查询更改数据
            function getDatas(row) {
                dialogFormVisible.value = true
                let url = "http://localhost:8080/departments/"
                console.log(row.id);
                axios.get(url + row.id)
                    .then(function (response) {
                        form.id = response.data.data.id
                        form.scopeassessment = response.data.data.scopeassessment
                        form.timeassessment = response.data.data.timeassessment
                        form.departmentweektarget = response.data.data.departmentweektarget
                        form.departmentname = response.data.data.departmentname
                        form.departmentassessment = response.data.data.departmentassessment
                        form.contentassessment = response.data.data.contentassessment

                        // console.log("aaa", form.id);



                    }).catch(function (error) {
                        console.log(error);
                    });
            }

            // 根据id更改数据
            function putDatas() {
                let url = "http://localhost:8080/departments/"
                axios.put(url, {
                    id: form.id,
                    scopeassessment: form.scopeassessment,
                    timeassessment: form.timeassessment,
                    departmentweektarget: form.departmentweektarget,
                    departmentname: form.departmentname,
                    departmentassessment: form.departmentassessment,
                    contentassessment: form.contentassessment
                })
                    .then(function (response) {
                        console.log(response);
                        if (response.data.flag) {
                            ElMessage({
                                message: "文章删除成功！",
                                type: 'success'
                            });

                            dialogFormVisible.value = false;
                        } else {
                            ElMessage.error('文章删除操作失败！');
                        }
                    }).finally(() => {
                        let url = `http://localhost:8080/departments/${pagination.currentPage}/${pagination.pageSize}`
                        axios.get(url)
                            .then(function (response) {
                                console.log("数据获取成功", response.data.data.records);
                                content_datas.value = response.data.data.records;

                                pagination.pageSize = response.data.data.size;
                                pagination.currentPage = response.data.data.current;
                                pagination.total = response.data.data.total;
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

            // 搜索的实现
            function se() {
                // alert("成功!")
                // const router = useRouter()
                // router.push('/search');
                // 请求模板数据
                let url = `http://localhost:8080/departments/searchs/${search.value}`;
                axios.get(url)
                    .then(function (response) {
                        console.log(response.data.data);
                        content_datas.value = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }

            return {
                content_datas,
                search,
                delDatas,
                dialogTableVisible,
                formLabelWidth,
                dialogFormVisible,
                form,
                dialogVisible,
                putDatas,
                getDatas,
                background,
                pagination,
                handleCurrentChange,
                se
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    /* .el-table-column {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    } */

    .el-button {
        padding: 0 10px;
    }

    .bian {
        background: #51B37F;
        color: #fff;
    }

    .del {
        background: #FFA17A;
    }

    :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
        background-color: #51B37F !important;
    }
</style>